<template>
  <div class="p-3">
    <a-card style="height: 820px" :bordered="false">
      <a-form layout="inline">
        <a-form-item label="修改时间" name="time">
          <a-range-picker v-model:value="searchForm.time" />
        </a-form-item>
        <a-form-item label="归属机构" name="comId">
          <a-tree-select
            v-model:value="searchForm.comId"
            tree-node-filter-prop="label"
            style="width: 260px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="comanyList"
            placeholder="请选择归属机构"
          />
        </a-form-item>
        <a-form-item label="申请人" name="applicant">
          <a-select
            style="width: 150px"
            placeholder="请选择申请人"
            v-model:value="searchForm.applicant"
          />
        </a-form-item>
        <a-form-item label="停用状态" name="status">
          <a-select
            style="width: 150px"
            placeholder="请选择停用状态"
            v-model:value="searchForm.status"
          />
        </a-form-item>
        <a-form-item label="审批状态" name="approvalStatus">
          <a-select
            style="width: 150px"
            placeholder="请选择审批状态"
            v-model:value="searchForm.approvalStatus"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">新增</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        class="mt-3"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'enable'">
            {{ record.enable == 0 ? '正常' : '停用' }}
          </template>
          <template v-if="column.dataIndex == 'action'">
            <a-button type="link" @click="handleApproval(record)"
              >申请停用</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getCompanyTree } from '#/api/core/develop';
import * as netData from '#/api/core/setting';
import { message, Modal } from 'ant-design-vue';
import dayjs from 'dayjs';

type TreeNode = {
  key: string | number;
  label: string;
  value: string | number;
  isLeaf: boolean;
  children: TreeNode[];
};
onMounted(() => {
  getTableData();
});
const comanyList = ref<TreeNode[]>([]);
const getTableData = () => {
  getCompanyTree().then((res: any) => {
    // console.log(res);
    // 递归处理树形数据，保持层级结构
    const processTreeData = (tree: any[]): TreeNode[] => {
      console.log(tree);
      return tree.map((item: any): TreeNode => {
        const processedItem: TreeNode = {
          key: item.id,
          label: item.name,
          value: item.id,
          isLeaf: item.children && item.children.length > 0 ? false : true,
          children: [],
        };

        // 如果存在children，递归处理子节点
        if (item.children && item.children.length > 0) {
          processedItem.children = processTreeData(item.children);
        }

        return processedItem;
      });
    };

    const treeData = processTreeData([res.data]);
    comanyList.value = treeData;
    console.log(comanyList.value);
  });
};
const searchForm = reactive({
  comId: '',
  villageId: [],
  time: '',
  applicant: '',
  status: '',
  approvalStatus: '',
});
const columns = [
  {
    title: '小区名称',
    dataIndex: 'village',
    key: 'village',
    align: 'center',
  },
  {
    title: '停用状态',
    dataIndex: 'enable',
    key: 'enable',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
    key: 'applicant',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'applicationTime',
    key: 'applicationTime',
    align: 'center',
  },
  {
    title: '审批状态',
    dataIndex: 'approvalStatus',
    key: 'approvalStatus',
    align: 'center',
  },
  {
    title: '审批人',
    dataIndex: 'approver',
    key: 'approver',
    align: 'center',
  },
  {
    title: '审批时间',
    dataIndex: 'approvalTime',
    key: 'approvalTime',
    align: 'center',
  },
  {
    title: '审批意见',
    dataIndex: 'approvalOpinion',
    key: 'approvalOpinion',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
  },
];
const dataSource = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const onSearch = () => {
  const query = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    comId: searchForm.comId,
    time: searchForm.time
      ? `${dayjs(searchForm.time[0]).format('YYYY-MM-DD')},${dayjs(
          searchForm.time[1],
        ).format('YYYY-MM-DD')}`
      : '',
    applicant: searchForm.applicant,
    status: searchForm.status,
    approvalStatus: searchForm.approvalStatus,
  };
  netData.getProjectStopInfo(query).then((res: any) => {
    console.log(res);
    dataSource.value = res.data.data;
    pagination.total = res.data.total;
  });
};
const handleApproval = (record: any) => {
  Modal.confirm({
    title: '停用项目',
    content: '确认停用项目？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      netData
        .applyProjectStop({
          villageId: record.villageId,
          applyforreason: record.applyforreason,
          approvalStatus: record.approvalStatus == '0' ? 0 : 1,
        })
        .then((res: any) => {
          if (res.code == 200) {
            message.success('停用成功');
            onSearch();
          } else {
            message.error(res.msg);
          }
        });
    },
  });
};
</script>
<style scoped></style>
